<template>
  <div>
    <div class="search-bar">
      <el-input
        v-model="specGroupPage.key"
        clearable
        placeholder="请输入规格组名称"
        style="width: 300px"
        class="filter-item"
        @keyup.enter.native="handleSpecGroupFilter"
      />

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSpecGroupFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-edit" @click="specGroupDialogVisible = true">
        新增
      </el-button>
      <el-button :loading="specGroupTableDownloadLoading" class="filter-item" type="primary" icon="el-icon-download">
        导出
      </el-button>
    </div>

    <!-- 查询结果表格 -->
    <el-table v-loading="specGroupLoading" :data="specGroupTableData" style="width: 100%" @row-click="handleSpecGroupRowClick">
      <el-table-column prop="specGroupName" label="规格组名称" />
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleSpecGroupUpdate(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteSpecGroup(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      layout="prev, pager, next"
      :total="specGroupPage.totalCount"
      @current-change="handleCurrentChange"
    />

    <!-- 对话框组件 -->
    <el-dialog title="规格组" :visible.sync="specGroupDialogVisible">
      <el-form ref="specGroupForm" :model="specGroupForm" :rules="specGroupRules">
        <el-form-item label="规格组名称" :label-width="formLabelWidth">
          <el-input v-model="specGroupForm.specGroupName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="specGroupDialogVisible = false">取 消</el-button>
        <el-button v-loading="saveSpecGroupBtnLoading" type="primary" @click="handleSaveSpecGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { pagingSpecGroups, saveSpecGroup } from '@/api/spec'

export default {
  props: {
    selectedCategoryId: {
      type: String,
      default: ''
    }
  },
  data() {
    /**
     * 对规格组名称进行校验
     */
    const validateSpecGroupName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入规格组名称'))
      } else {
        callback()
      }
    }

    return {
      specGroupTableDownloadLoading: false,
      specGroupPage: {
        categoryId: '',
        key: '',
        currentPage: 1,
        pageSize: 10,
        pageSegments: [],
        totalPages: 0,
        totalCount: 0
      },

      specGroupLoading: false,
      specGroupTableData: [],

      specGroupDialogVisible: false,
      formLabelWidth: '120px',
      specGroupForm: {
        specGroupName: ''
      },
      specGroupRules: {
        specGroupName: [{ required: true, trigger: 'blur', validator: validateSpecGroupName }]
      },
      saveSpecGroupBtnLoading: false
    }
  },
  watch: {
    selectedCategoryId(val) {
      // 查询当前选择商品分类节点下的所有规则组
      this.specGroupPage.categoryId = val
      this.listSpecGroups(this.specGroupPage)
    }
  },
  methods: {
    /**
     * 处理查询
     */
    handleSpecGroupFilter() {
      // 查询当前选择商品分类节点下的所有规则组
      this.listSpecGroups(this.specGroupPage)
    },

    /**
     * 根据商品分类ID查询规格组列表
     */
    listSpecGroups(params) {
      this.specGroupLoading = true

      // 根据商品分类分页查询规格组
      pagingSpecGroups(params)
        .then((res) => {
          if (res) {
            this.specGroupPage.currentPage = parseInt(res.currentPage)
            this.specGroupPage.pageSegments = parseInt(res.pageSegments)
            this.specGroupPage.pageSize = parseInt(res.pageSize)
            this.specGroupPage.totalPages = parseInt(res.totalPages)
            this.specGroupPage.totalCount = parseInt(res.totalCount)

            if (res.rows) {
              this.specGroupTableData = res.rows
            }
          } else {
            this.specGroupTableData = []
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .then(res => {
          this.specGroupLoading = false
        })
    },

    /**
     * 处理单击改变当前页
     */
    handleCurrentChange(currentPage) {
      // 查询当前选择商品分类节点下的所有规则组
      this.specGroupPage.currentPage = currentPage
      this.listSpecGroups(this.specGroupPage)
    },

    /**
     * 保存规格组
     */
    handleSaveSpecGroup() {
      this.$refs.specGroupForm.validate(valid => {
        if (!valid) {
          return
        }
        this.saveSpecGroupBtnLoading = true

        // 保存规格组
        saveSpecGroup({
          specGroupName: this.specGroupForm.specGroupName,
          categoryDTO: {
            id: this.selectedCategoryId
          }
        })
          .then((res) => {
            this.resetSpecGroupForm()
            this.listSpecGroups(this.specGroupPage)
            this.specGroupDialogVisible = false
          })
          .catch((err) => {
            console.log(err)
          })
          .then(res => {
            this.saveSpecGroupBtnLoading = false
          })
      })
    },

    /**
     * 编辑规格组
     */
    handleEditSpecGroup() {
    },

    /**
     * 删除规格组
     */
    handleDeleteSpecGroup(index, row) {
      this.$confirm('此操作将永久删除该规格组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * 重置规则组表单
     */
    resetSpecGroupForm() {
      this.specGroupForm.specGroupName = ''
    },

    /**
     * 处理表格行单击事件
     */
    handleSpecGroupRowClick(row, column, event) {
      this.$emit('specGroupTableRowSelected', row)
    }
  }
}
</script>
<style scoped>
</style>
